<template>
  <div>
    <el-form ref="form" :model="formData" :label-width="formLabelWidth">

      <el-form-item label="账号">

        <el-input :value="formData.account" disabled="disabled"></el-input>
      </el-form-item>

      <el-form-item label="头像">

        <input-files
            v-if="fileDisk"
            :preview="true"
            :file-upload-timely="true"
            :readonly="false"
            :data-file="formData.picture"
            :file-disk="fileDisk"
            v-on:change="(val)=>{ formData.picture=val}"
        ></input-files>
        <file-view
            v-else
            :data-file="formData.picture"
        >

        </file-view>
      </el-form-item>

      <el-form-item label="昵称">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>

      <el-form-item label="性别">
        <el-radio-group v-model="formData.sex">
          <el-radio v-for="(item, index) in sexOptions" :label="item.label" :value="item.value"
                    :key="index"></el-radio>
        </el-radio-group>

      </el-form-item>

      <el-form-item label="个人简介">
        <input-rich-editor type="textarea" :value="formData.summary"
                           v-on:change="(content)=>{formData.summary=content}"></input-rich-editor>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="submit">保存</el-button>

      </el-form-item>
    </el-form>
  </div>

</template>

<script>

import ApiAuth from '../services/api-auth'

export default {
  components: {},
  props: {
    dataEntity: {
      type: Object,
      default: function (){
        return null
      }
    },
    sexOptions: {
      type: Array,
      default: function (){
        return [
          {label: "男", value: "男"},
          {label: "女", value: "女"},
          {label: "保密", value: "保密"},
        ]
      }
    },
    authGuard: {
      type: String,
      default: 'api'
    },
    fileDisk: {
      type: String,
      default: ''
    },
  },
  data() {

    return {
      formLabelWidth: window.formLabelWidth || '80px',
      formData: {},
      formErrors: {},

    }
  },
  async created() {
    if (!this.dataEntity) {
      await ApiAuth.checkLogin(this.authGuard)
      .then(function (user,token){
        this.assignData(user);
      })
    }else{
      this.assignData(this.dataEntity);
    }

    //console.log(this);
  },
  mounted() {
    let _this = this;

  },
  methods: {
    assignData: function (data) {
      if (LeUtils.typeIs('object', data)) {
        this.formData = Object.assign({}, this.formData, data)
      }


    },
    joinToString: function (obj, glue) {
      return LeUtils.joinToString(obj, glue)
    },


    submit: function (event) {

      if (event) {
        event.preventDefault()
      }
      let _this = this;

      //console.log(_this.formData)

      LeRoute.request('api.l-e-s.auth.profile.save', {
        picture: LeUtils.valueGet(_this.formData, 'picture', ''),
        name: LeUtils.valueGet(_this.formData, 'name', ''),
        sex: LeUtils.valueGet(_this.formData, 'sex', ''),
        summary: LeUtils.valueGet(_this.formData, 'summary', ''),

      }).then(function (res_data) {
        _this.$message.success('修改成功')
        _this.assignData(LeUtils.valueGet(res_data, 'data', {}))
        _this.$emit('changed')
      })


    },


  }
}
</script>
